<template>
  <div class="home-conte">
    <van-nav-bar title="子陌" fixed>
      <template #left>
        <img class="logo" src=".././../assets/images/logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" size="34" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <!-- 频道部分 -->
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show = true" />
    <!-- v-model自动获取name属性 给了下面双向数据绑定channelid -->
    <van-tabs v-model="channelId" sticky offset-top="1.226667rem" animated>
      <van-tab :name="item.id" v-for="item in channel" :key="item.id" :title="item.name">
        <ArticleList :chID="channelId"></ArticleList>
      </van-tab>
    </van-tabs>

    <!-- 弹出层组件 -->
    <van-popup v-model="show" class="edit_wrap">
      <!-- 弹出层的主体区域 --><ChannelEdit
        :channeli="channel"
        @addChannel="addChannel"
        @rovmeChannel="rovmeChannel"
        @fguanbi="hahah"
        @qiehuan="qiehuan"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getChannelAPI } from '@/api/index.js'
import { updatachannelAPI } from '@/api/home.js'
import ArticleList from '@/views/Home/ArticleList.vue'
import ChannelEdit from '@/views/Home/ChannelEdit.vue'
const cObj = {}
export default {
  data() {
    return {
      channel: [],
      channelId: 0,
      show: false
    }
  },
  async created() {
    const resp = await getChannelAPI()
    this.channel = resp.data.data.channels
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
    async gonggong() {
      const newArr = this.channel.map(obj => {
        const newObj = { ...obj }
        return newObj
      })
      // 把拷贝过来的新数组删除推荐
      const index = newArr.findIndex(obj => obj.id === 0)
      newArr.splice(index, 1)
      // 新数组 遍历 添加接口需要的属性 删除接口不要的属性
      newArr.forEach((obj, index) => {
        obj.seq = index + 1
        delete obj.name
      })
      // 传给接口
      const res = await updatachannelAPI({
        channels: newArr
      })
      console.log(res)
    },
    // 添加方法
    addChannel(obj) {
      // 点击给数组里面添加
      this.channel.push(obj)
      this.gonggong()
    },
    rovmeChannel(obj) {
      const index = this.channel.findIndex(item => item.id === obj.id)
      this.channel.splice(index, 1)
      this.gonggong()
    },
    hahah() {
      this.show = false
    },
    qiehuan(id) {
      this.channelId = id
    }
  },
  beforeRouteLeave(to, from, next) {
    from.meta.top = window.scrollY
    next()
  },
  watch: {
    channelId(newValue, oldValue) {
      // console.log(newValue)
      cObj[oldValue] = window.scrollY
      setTimeout(() => {
        window.scrollTo(0, cObj[newValue])
      })
      console.log(cObj)
    }
  }
}
</script>

<style lang="less" scoped>
.home-conte {
  padding-top: 46px;
}
.van-nav-bar {
  background: linear-gradient(to right, #654ea3, #eaafc8);
}
.logo {
  width: 100px;
  height: 30px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

.van-popup {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #eaafc8, #3fada8);
}
/deep/ .van-nav-bar {
  background: linear-gradient(to right, #654ea3, #eaafc8);
}
</style>
